﻿<!DOCTYPE HTML>
<html>

<head>
	<script type="text/javascript">
		window.onload = function () {
			var chart = new CanvasJS.Chart("chartContainer", {
				title: {
					text: "Annual Expenses"
				},
				animationEnabled: true,
				axisY: {
					includeZero: false,
					prefix: "$ "
				},
				toolTip: {
					shared: true,
					content: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span> <span style='\"'color: dimgrey;'\"'>${y}</span> "
				},
				legend: {
					fontSize: 13
				},
				data: [
				{
					type: "splineArea",
					showInLegend: true,
					name: "Salaries",
					color: "rgba(54,158,173,.6)",
					dataPoints: [
					{ x: new Date(2012, 2), y: 30000 },
					{ x: new Date(2012, 3), y: 35000 },
					{ x: new Date(2012, 4), y: 30000 },
					{ x: new Date(2012, 5), y: 30400 },
					{ x: new Date(2012, 6), y: 20900 },
					{ x: new Date(2012, 7), y: 31000 },
					{ x: new Date(2012, 8), y: 30200 },
					{ x: new Date(2012, 9), y: 30000 },
					{ x: new Date(2012, 10), y: 33000 },
					{ x: new Date(2012, 11), y: 38000 },
					{ x: new Date(2013, 0), y: 38900 },
					{ x: new Date(2013, 1), y: 39000 }

					]
				},
				{
					type: "splineArea",
					showInLegend: true,
					name: "Office Cost",
					color: "rgba(134,180,2,.7)",
					dataPoints: [
					{ x: new Date(2012, 2), y: 20100 },
					{ x: new Date(2012, 3), y: 16000 },
					{ x: new Date(2012, 4), y: 14000 },
					{ x: new Date(2012, 5), y: 18000 },
					{ x: new Date(2012, 6), y: 18000 },
					{ x: new Date(2012, 7), y: 21000 },
					{ x: new Date(2012, 8), y: 22000 },
					{ x: new Date(2012, 9), y: 25000 },
					{ x: new Date(2012, 10), y: 23000 },
					{ x: new Date(2012, 11), y: 25000 },
					{ x: new Date(2013, 0), y: 26000 },
					{ x: new Date(2013, 1), y: 25000 }

					]
				},
				{
					type: "splineArea",
					showInLegend: true,
					name: "Entertainment",
					color: "rgba(194,70,66,.6)",
					dataPoints: [
					{ x: new Date(2012, 2), y: 10100 },
					{ x: new Date(2012, 3), y: 6000 },
					{ x: new Date(2012, 4), y: 3400 },
					{ x: new Date(2012, 5), y: 4000 },
					{ x: new Date(2012, 6), y: 9000 },
					{ x: new Date(2012, 7), y: 3900 },
					{ x: new Date(2012, 8), y: 4200 },
					{ x: new Date(2012, 9), y: 5000 },
					{ x: new Date(2012, 10), y: 14300 },
					{ x: new Date(2012, 11), y: 12300 },
					{ x: new Date(2013, 0), y: 8300 },
					{ x: new Date(2013, 1), y: 6300 }

					]
				},
				{
					type: "splineArea",
					showInLegend: true,
					color: "rgba(127,96,132,.6)",
					name: "Maintenance",
					dataPoints: [
					{ x: new Date(2012, 2), y: 1700 },
					{ x: new Date(2012, 3), y: 2600 },
					{ x: new Date(2012, 4), y: 1000 },
					{ x: new Date(2012, 5), y: 1400 },
					{ x: new Date(2012, 6), y: 900 },
					{ x: new Date(2012, 7), y: 1000 },
					{ x: new Date(2012, 8), y: 1200 },
					{ x: new Date(2012, 9), y: 5000 },
					{ x: new Date(2012, 10), y: 1300 },
					{ x: new Date(2012, 11), y: 2300 },
					{ x: new Date(2013, 0), y: 2800 },
					{ x: new Date(2013, 1), y: 1300 }

					]
				},
				{
					type: "spline",
					showInLegend: true,
					color: "rgba(127,96,255,.6)",
					name: "Average",
					dataPoints: [
					{ x: new Date(2012, 2), y: 15475 },
					{ x: new Date(2012, 3), y: 14900 },
					{ x: new Date(2012, 4), y: 12100 },
					{ x: new Date(2012, 5), y: 13450 },
					{ x: new Date(2012, 6), y: 12200 },
					{ x: new Date(2012, 7), y: 14225 },
					{ x: new Date(2012, 8), y: 14400 },
					{ x: new Date(2012, 9), y: 16250 },
					{ x: new Date(2012, 10), y: 17900 },
					{ x: new Date(2012, 11), y: 19400 },
					{ x: new Date(2013, 0), y: 19000 },
					{ x: new Date(2013, 1), y: 17900 }

					]
				}

				]
			});

			chart.render();
		}
	</script>
	<script src="../../canvasjs.min.js"></script>
	<title>CanvasJS Example</title>
</head>
<body>
	<div id="chartContainer" style="height: 400px; width: 100%;">
	</div>
</body>

</html>
